<template>
    <div class="bigbox">
        <div class="box01" v-for="(el, index) in arr1" :key="index">
            <router-link :to="{ path: '/single', query: { wid: el.wid } }" class="tosingle">
                <div class="smallbox" :style="{ backgroundImage: `url(${el.video})` }"></div>
                <!-- <img src="https://image.gogoup.com//course/20230921/1695288902011.jpg?x-oss-process=image/format,webp"> -->
                <p>{{ el.title }}</p>
                <p>{{ el.zhuti }}</p>
                <p class="dianzan">点赞{{ el.dianzan }}</p>
                <div class="smallbox01">
                    <img class="touxiang" :src="el.avatar">
                    <span class="auther">{{ el.auther }}</span>
                </div>
            </router-link>
        </div>
        <h1>{{ sousuoshuju }}</h1>
    </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue"
import { useRouter, useRoute } from "vue-router"
let $route = useRoute()
console.log($route.query.data);
let arr1 = ref([])
let { proxy } = getCurrentInstance()
let load01 = async () => {
    let res1 = await proxy.$axios.post("/egg/sousuo", { data: $route.query.data })
    arr1.value = arr1.value.concat(res1.data.info)
}
onMounted(() => {
    console.log($route.query.data);
    load01()
})
</script>
<style scoped>
.bigbox {
    margin: 0px 124px;
    padding-top: 30px;
    display: flex;
    justify-content: center;
    width: 1200px;
    flex-wrap: wrap
}

p {
    margin-left: 20px;
}

.box01 {
    margin-right: 24px;
    margin-bottom: 24px;
    width: 282px;
    height: 337px;
    background-color: white;
}

img {
    width: 100px;
    height: 100px;
}

.smallbox {
    background-size: 100% 100%;
    width: 282px;
    height: 158px;
}

.smallbox01 {
    border-top: 1px solid rgb(233, 231, 231);
    display: flex;
    justify-content: start;
    align-items: center;
    margin: 0px 20px;
}

.touxiang {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.auther {
    font-size: 14px;
}

.title {
    margin-left: 20px;

}

.bigbox {
    background-color: #f5f6f6;
}

p {
    font-size: 14px;
}

.dianzan {
    font-size: 12px;
    color: #a1a3a3;
}

p,
span {
    color: black;
}

.tosingle {
    text-decoration: none;

}</style>